<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<title>绑定样式</title>
	<script type="text/javascript" src="../js/vue.js"></script>
	<style>
		.atguigu {
			border: 3px solid black;
		}

		.classA {
			background-color: skyblue;
		}

		.classB {
			color: red;
		}

		.classC {
			text-shadow: 2px 2px 3px yellow;
		}
	</style>
</head>

<body>
	<!--
		1. 绑定class样式
			:class="xxx" xxx可以是字符串、对象、数组
		2. 绑定style样式
			:style="{fontSize: size + 'px' }"
				其中size是data属性
		-->
	<!-- 准备好一个容器-->
	<div id="root">

		<!-- class的字符串写法，适用于：类名不确定，要动态获取 -->
		<h2 class="atguigu" :class="myStyle">{{title}}</h2>

		<!--class的对象写法，适用于：类名确定，但不确定用不用  -->
		<h2 class="atguigu" :class="{classB:hasB,classC:hasC}">{{title}}</h2>

		<!--class的三元表达式写法，适用于：类名确定，但不确定用不用  -->
		<h2 class="atguigu" :class="hasB ? 'classB' : '' ">{{title}}</h2>

		<!--class的数组写法，适用于：同时应用多个class  -->
		<h2 class="atguigu" :class="[a,b,c]">{{title}}</h2>

		<!-- 绑定style -->
		<h2 class="atguigu" :class="[a,b,c]" :style="{fontSize:size+'px'}">{{title}}</h2>

	</div>

	<script type="text/javascript">
		new Vue({
			el: "#root",
			data: {
				title: '0922的同学过年好',
				myStyle: 'classA',
				hasB: true, //标识是否使用classB样式
				hasC: true, //标识是否使用classC样式
				a: 'classA',
				b: 'classB',
				c: 'classC',
				size: 40
			}
		})
	</script>
</body>

</html>